<template>
	
		<view>
		
		
		
				<!-- 商家信息 -->
						<view class="box" style="display: flex;margin-bottom: 5px;">
							
							<view style="flex: 1; display: flex; flex-direction: column; justify-content: space-between;">
								<view style="font-size: 36rpx; font-weight: bold;display: flex;">{{ business.name || '' }}  
								<!-- 收藏logo -->
								<span v-if="isCollect === 'true'">
									<cover-image  @click="cancel(business.id,user.id,)" src="../../static/icons/实心收藏.png"  style="width: 30px;height: 30px;margin-left: 30px;"></cover-image>
								</span>
								<span v-if="isCollect != 'true'">
									<cover-image  @click="collect(business.id,user.id)" src="../../static/icons/空心收藏.png"  style="width: 30px;height: 30px;margin-left: 30px;"></cover-image>
								</span>
								</view>
								<view>
									<text style="padding-right: 10rpx; border-right: 2rpx solid #ccc;">平台配送</text>
									<text style="padding: 0 10rpx; border-right: 2rpx solid #ccc;">免配送费</text>
									<text style="padding: 0 10rpx;">30分钟送达</text>
								</view>
								<view>
									地址：{{ business.address || '' }}
								</view>
								<view>
									联系电话：{{ business.phone || '' }}
								</view>
							</view>
				
							<view style="width: 200rpx; height: 200rpx;">
								<image :src="business.avatar" style="width: 100%; height: 100%; border-radius: 50%;"></image>
							</view>
							
						</view>
				<!-- 商家信息结束 -->
				
				
				
				<!-- 商家的分类商品列表 -->			
							<uni-section  >
									<view class="uni-padding-wrap uni-common-mt">
										<uni-segmented-control :current="current" :values="items" :style-type="styleType"
											:active-color="activeColor" @clickItem="onClickItem" />
									</view>
									<view class="content">
										<!-- 商品列表 -->
										<view v-if="current === 0">	
										<!-- 评价列表 -->
										<!-- 分类商品展示 -->
												<view style="display: flex; background-color: #fff; border-radius: 10rpx; padding: 10rpx;">
																<view style="width: 160rpx; text-align: center;">
																	<span style="font-weight: bold;background-color: #eee; position: top:-40px;font-size: 15px;">商品类型</span>
																	<view v-for="(goodsType,index) in categoryList"  class="category-item" @click="loadGoods(goodsType)"
																		>
																		{{ goodsType}}
																	</view>
																</view>
														
									
															<scroll-view :scroll-top="scrollTop" scroll-y="true"    style="height: 50vh;">
																<view style="padding: 20rpx; min-height: 70vh">
															
																<view style="display: flex; grid-gap: 20rpx; margin-bottom: 20rpx;" v-for="item in goodsList" :key="item.id">
																	<view style="width: 200rpx; height: 200rpx;">
																		<image :src="item.images" style="width: 200rpx; height: 200rpx; border-radius: 10rpx; display: block;"></image>
																	</view>
																	<view style="flex: 1; display: flex; flex-direction: column; justify-content: space-between;">
																		<view style="font-size: 32rpx; font-weight: bold;">{{ item.name }}</view>
																		<!-- <view style="font-size: 24rpx;">{{ item.descr }}</view> -->
																		<view>
																			<!-- <text class="mini-btn">7折</text> -->
																			<text style="font-size: 24rpx; margin-left: 10rpx;">已售 {{item.num}}</text>
																		</view>
																		<view>
																			<text style="text-decoration: line-through;">￥{{ item.amount }}</text>
																			<text style="color: orangered; margin-left: 10rpx;">￥{{ item.actual || 0 }}</text>
																			<text class="mini-btn" style="margin-left: 5rpx;">到手价</text>
																		</view>
																		<view>
																			<text class="mini-btn-fill" @click="selectedGoods(item)">选购</text>
																		</view>
																	</view>
																</view>
															</view>`
															</scroll-view>
												</view>
							          </view>
										<view v-if="current === 1" style="height: 70vh;">
											
											<scroll-view :scroll-top="scrollTop" scroll-y="true"    style="height: 60vh;">
												
											<view class="commentList" >
												<view class="child" v-for="item in commentList" :key="item.id">
													
													<!-- 头部 -->
													<view class="head">
														<cover-image :src="item.avatar" ></cover-image>
														<span style="margin-left: 25px;font-weight: bold;">{{item.userName}}</span>
														<span>{{item.time}}</span>
													</view>
													
													<!-- 评论内容 -->
													<view class="comment">
														<view class="showStar" style="display: flex;">
															<span style="margin-left: 15px;">满意度</span>
															<uni-rate :readonly="true" :value="item.star" :size="18" style="margin-left: 10px;"/>
														</view>
														<view class="showContent" style="margin-left: 10px;">
															{{item.content}}
														</view>
													</view>
													
												</view>
											</view>
											
											
											</scroll-view>
											
										</view>
										
									</view>
								</uni-section>
								
								
						
						
						
							
			       
						<!-- g购物车导航栏 -->
					<view class="uni-container">
						<view class="goods-carts">
							<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
								@buttonClick="buttonClick" />
						</view>
			
					</view>



					<!--购物车弹窗  -->
                   <uni-popup ref="popup" type="bottom" background-color="#fff">
                     <scroll-view style="max-height: 70vh;" scroll-y="true">
                       <view style="padding: 40rpx 40rpx 280rpx 40rpx;">
                         <view @click="deleteAll()" style="text-align: right; margin-bottom: 10rpx; color: #999;" >
                           <uni-icons   style="position: relative; top: 4rpx;" type="trash" size="16" color="#999"  ></uni-icons>清空
						   </view>
						   
                         <view v-for="(item, index) in cart" :key="item.id" style="display: flex; margin-bottom: 20rpx;" v-if="item.goods">
							 <!-- 图片 -->
                           <view style="width: 100rpx; height: 100rpx;">
                             <image style="width: 100%; height: 100%; display: inline-block;" :src="item.goods.images"></image>
                           </view>
						   <!--  -->
                           <view style="flex: 1; margin-left: 20rpx; display: flex; flex-direction: column; justify-content: space-around;">
                             <view style="flex: 1;">{{ item.goods.name }}</view>
                             <view style="flex: 1; color: red; display: flex; align-items: flex-end;">
                               <view style="flex: 1;">￥{{ item.goods.actual }}</view>
							   
                               <view style="flex: 1; display: flex; justify-content: right;">
                                 <uni-number-box :min="1" v-model="item.num" @change="updateCart(item)"></uni-number-box>
                               </view>
							   
                             </view>
                           </view>
                         </view>
						 
                        <view style="margin-top: 40rpx; text-align: right;" v-if="totalMoney">总金额：<text style="color: red;">￥{{ totalMoney }}</text></view>
                       </view>
                     </scroll-view>
                   </uni-popup>
						
		</view>				
						
						
						



</template>

<script>
	import '@/static/css/global.css'
	import _ from 'lodash'
	export default {
		onLoad(option) {
			
			this.business.id = option.businessId
			this.isCollect = option.isCollect
			//获取商家个人信息
			this.$request.get('/business/selectById/'+option.businessId).then(res => {
				this.business = res.data || {}
			})
			//获取商家商品分类
			this.$request.get('/goods/showCategoryByBusinessId/'+option.businessId).then(res => {
				this.categoryList = res.data || []
			})
			
			this.goodsType = 'none'
			this.$request.get('/goods/selectByBusinessIdAndType/'+option.businessId+"/"+this.goodsType).then(res => {
				this.goodsList = res.data || []
			
			})
			
				this.loadCart()
		},
		data() {
			return {
				user:uni.getStorageSync('xm-user'),
				collectObj:{},
				cart:[],
				totalMoney :'',
				type: 'center',
				business:{},
				categoryList:[],
				goodsType:'',
				goodsList:[],
				isCollect:'',
				myDebouce:'',
				buttonGroup: [
									{
										text: '立即购买',
										backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
										color: '#fff'
									}
								],
				options: [{
					
													icon: 'cart',
													text: '购物车',
													info: 2
												}],
				cartObj:{},
				current: 0,
				items: ['商品', '评价'],
				styleType: 'text',
				activeColor: '#007aff',
				commentList:[],
			}
		},
		methods: {
			onClickItem(e) {
							if (this.current !== e.currentIndex) {
								this.current = e.currentIndex
							}
							this.selectAll()
							this.selectAllCommentBybusinessId()
						},
						selectAllCommentBybusinessId(){
							this.$request.get('/comment/selectAllBybusinessId/'+this.business.id).then(res =>{
								this.commentList = res.data
							})
						},
			myDebounce(businessId,userId){
				
				this.collectObj.businessId = businessId
				this.collectObj.userId = userId
				
				if(!this.myDebouce ){
					 this.myDebouce = _.debounce(()=>{
						if(this.isCollect == "true"){
							//加入收藏
							
							this.$request.post('/collect/add',this.collectObj).then(res =>{
								if(res.code == 200){
								uni.showToast({
								  icon: 'success',
								  title: "收藏成功~"
								})
								
								}
							})
						}else{
							//取消收藏
							this.$request.post('/collect/deleteByTwoId',this.collectObj).then(res =>{
								if(res.code == 200){
								uni.showToast({
								  icon: 'success',
								  title: "取消成功~"
								})
								
								}
							})
						}
					},1000)
				}
				this.myDebouce()
			},
			cancel(businessId,userId){
				this.isCollect = "false"
				this.myDebounce(businessId,userId)
			},
			collect(businessId,userId){
				
				this.isCollect = "true"
				this.myDebounce(businessId,userId)
				
			},
		
			loadGoods(goodsType){
				this.goodsType = goodsType
				this.$request.get('/goods/selectByBusinessIdAndType/'+this.business.id+"/"+this.goodsType).then(res => {
					this.goodsList = res.data || []
				
				})
			},
				
			selectAll(){
				this.goodsType = 'none'
				this.$request.get('/goods/selectByBusinessIdAndType/'+this.business.id+"/"+this.goodsType).then(res => {
					this.goodsList = res.data || []
				})
			},

			selectedGoods(goods){
				this.cartObj.goodsId = goods.id
				this.cartObj.num = 1
				this.cartObj.userId = this.user.id
				this.cartObj.businessId = this.business.id
				//获取购物车最新
				this.$request.post('/cart/add',this.cartObj).then(res => {
				this.loadCart()
				})
					
			},
			updateCart(item){
				this.$request.post('/cart/updateById',item).then(res => {
					this.loadCart()
				})
			},
	
	
			loadCart(){
				this.$request.get('/cart/showCartByUserId/'+this.user.id+'/'+this.business.id).then(res => {
					this.cart = res.data.cartList || []
					this.totalMoney = res.data.total
					this.options[0].info = this.cart.length 
					
				})
			},
	
	
	
			onClick(e) {
						this.$refs.popup.open('bottom')
						this.loadCart()
					},
					buttonClick(e) {
						if(this.cart.length){
							uni.navigateTo({
												url:'/pages/confirm/confirm?userId='+this.user.id+'&businessId='+this.business.id
											})
						}else{
							uni.showToast({
							  icon: 'error',
							  title: '购物车没有商品！'
							})
						}
				
									
					},
				deleteAll(){
					if(this.cart.length != 0){
						this.$request.get('/cart/deleteBatch/'+this.user.id).then(res => {
							
							this.loadCart()
						})
					}else{
						uni.showToast({
						  icon: 'error',
						  title: '购物车没有商品！'
						})
					}
					
				}
		}
	}
</script>

<style>
	
	.uni-section {
		height: 90vh;
	}
	.content .commentList {
		background-color: white;
		height: 100vh;
		overflow: hidden;
	}
	
	.content .commentList .child {
		border-radius: 5px;
		box-shadow: 0px 0px 10px gray;
		margin-left: 10px;
		margin-top: 10px;
		width: 370px;
		margin-bottom: 10px;
		height: 115px;
		overflow: hidden;
	}
	.content .commentList .child .head{
		margin: 5px 10px;
		display: flex;
		overflow: hidden;
		margin-top: 10px;
		
	}
	.content .commentList .child .head cover-image{
		width: 40px;
		height: 40px;
		margin-left: 10px;
	}
	.content .commentList .child .head span:first-child{
	
	}
	.content .commentList .child .head span:last-child{
		font-weight: bold;
		margin-top: 20px;
		margin-left: -42px;
		
	}
   .category-item {
		padding: 15rpx;
		background-color: #eee;
		border-bottom: 2rpx solid #fff;
	}

	.category-active {
		background-color: #fff;
		color: orange;
		border-left: 5rpx solid orange;
	}

	.mini-btn {
		border: 2rpx solid orangered;
		padding: 0 4rpx;
		font-size: 22rpx;
		color: orangered;
		border-radius: 5rpx;
		font-weight: bold;
	}

	.mini-btn-fill {
		background-color: orange;
		padding: 0 4rpx;
		color: #fff;
		font-size: 24rpx;
		border-radius: 5rpx;
	}
	.example-body {
			padding: 0;
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
		}
	
    .goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>
